import React, { useRef, useEffect } from 'react'

interface TrendChartProps {
  data: {
    dates: string[]
    values: number[]
    highlightPoint: {
      date: string
      value: number
      label: string
    }
  }
}

const TrendChart: React.FC<TrendChartProps> = ({ data }) => {
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const animationProgress = useRef(0)

  useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return

    const ctx = canvas.getContext('2d')
    if (!ctx) return

    // 设置画布大小
    const rect = canvas.getBoundingClientRect()
    canvas.width = rect.width * window.devicePixelRatio
    canvas.height = rect.height * window.devicePixelRatio
    ctx.scale(window.devicePixelRatio, window.devicePixelRatio)

    // 动画函数
    const animate = () => {
      // 清除画布
      ctx.clearRect(0, 0, rect.width, rect.height)

      // 图表配置
      const padding = { top: 40, right: 40, bottom: 60, left: 60 }
      const chartWidth = rect.width - padding.left - padding.right
      const chartHeight = rect.height - padding.top - padding.bottom

      // 数据处理
      const maxValue = Math.max(...data.values)
      const minValue = Math.min(...data.values)
      const valueRange = maxValue - minValue

      // 绘制网格线
      ctx.strokeStyle = '#f0f0f0'
      ctx.lineWidth = 1

      // 水平网格线
      for (let i = 0; i <= 5; i++) {
        const y = padding.top + (chartHeight / 5) * i
        ctx.beginPath()
        ctx.moveTo(padding.left, y)
        ctx.lineTo(padding.left + chartWidth, y)
        ctx.stroke()
      }

      // 垂直网格线
      for (let i = 0; i <= data.dates.length - 1; i++) {
        const x = padding.left + (chartWidth / (data.dates.length - 1)) * i
        ctx.beginPath()
        ctx.moveTo(x, padding.top)
        ctx.lineTo(x, padding.top + chartHeight)
        ctx.stroke()
      }

      // 绘制渐变背景（带动画）
      const gradient = ctx.createLinearGradient(0, padding.top, 0, padding.top + chartHeight)
      gradient.addColorStop(0, 'rgba(59, 130, 246, 0.1)')
      gradient.addColorStop(1, 'rgba(59, 130, 246, 0.01)')

      // 计算动画进度下的数据点
      const animatedPoints = data.values.map((value, index) => {
        const x = padding.left + (chartWidth / (data.values.length - 1)) * index
        const y = padding.top + chartHeight - ((value - minValue) / valueRange) * chartHeight
        return { x, y, value }
      })

      // 绘制填充区域（带动画）
      ctx.beginPath()
      animatedPoints.forEach((point, index) => {
        if (index === 0) {
          ctx.moveTo(point.x, point.y)
        } else {
          // 根据动画进度决定是否绘制这一点
          const pointProgress = Math.min(1, animationProgress.current * data.values.length - index)
          if (pointProgress > 0) {
            const prevPoint = animatedPoints[index - 1]
            const currentX = prevPoint.x + (point.x - prevPoint.x) * pointProgress
            const currentY = prevPoint.y + (point.y - prevPoint.y) * pointProgress
            ctx.lineTo(currentX, currentY)
          } else {
            ctx.lineTo(point.x, point.y)
          }
        }
      })

      // 填充区域
      if (animatedPoints.length > 0) {
        const lastPoint = animatedPoints[animatedPoints.length - 1]
        const lastX = animatedPoints[0].x + (lastPoint.x - animatedPoints[0].x) * animationProgress.current
        ctx.lineTo(lastX, padding.top + chartHeight)
        ctx.lineTo(padding.left, padding.top + chartHeight)
        ctx.closePath()
        ctx.fillStyle = gradient
        ctx.fill()
      }

      // 绘制折线（带动画）
      ctx.beginPath()
      animatedPoints.forEach((point, index) => {
        if (index === 0) {
          ctx.moveTo(point.x, point.y)
        } else {
          const pointProgress = Math.min(1, animationProgress.current * data.values.length - index)
          if (pointProgress > 0) {
            const prevPoint = animatedPoints[index - 1]
            const currentX = prevPoint.x + (point.x - prevPoint.x) * pointProgress
            const currentY = prevPoint.y + (point.y - prevPoint.y) * pointProgress
            ctx.lineTo(currentX, currentY)
          } else {
            ctx.lineTo(point.x, point.y)
          }
        }
      })
      ctx.strokeStyle = '#3b82f6'
      ctx.lineWidth = 2
      ctx.stroke()

      // 绘制数据点（带动画）
      animatedPoints.forEach((point, index) => {
        const pointProgress = Math.min(1, animationProgress.current * data.values.length - index)
        if (pointProgress > 0) {
          const opacity = pointProgress
          const scale = 0.5 + pointProgress * 0.5
          
          ctx.beginPath()
          ctx.arc(point.x, point.y, 4 * scale, 0, 2 * Math.PI)
          ctx.fillStyle = `rgba(59, 130, 246, ${opacity})`
          ctx.fill()
          ctx.strokeStyle = '#ffffff'
          ctx.lineWidth = 2
          ctx.stroke()
        }
      })

      // 绘制高亮点（带延迟动画）
      if (animationProgress.current > 0.5) {
        const highlightIndex = Math.floor(data.values.length / 2)
        const highlightX = padding.left + (chartWidth / (data.values.length - 1)) * highlightIndex
        const highlightY = padding.top + chartHeight - ((data.highlightPoint.value - minValue) / valueRange) * chartHeight
        const highlightProgress = Math.min(1, (animationProgress.current - 0.5) * 2)

        // 高亮点
        ctx.beginPath()
        ctx.arc(highlightX, highlightY, 6 * highlightProgress, 0, 2 * Math.PI)
        ctx.fillStyle = `rgba(239, 68, 68, ${highlightProgress})`
        ctx.fill()
        ctx.strokeStyle = '#ffffff'
        ctx.lineWidth = 3
        ctx.stroke()

        // 高亮标签
        if (highlightProgress > 0.7) {
          ctx.fillStyle = `rgba(55, 65, 81, ${(highlightProgress - 0.7) / 0.3})`
          ctx.font = '12px Arial'
          ctx.textAlign = 'center'
          ctx.fillText(data.highlightPoint.date, highlightX, highlightY - 15)
          ctx.fillText(data.highlightPoint.label, highlightX, highlightY - 30)
        }
      }

      // 绘制 X 轴标签
      ctx.fillStyle = '#6b7280'
      ctx.font = '11px Arial'
      ctx.textAlign = 'center'
      data.dates.forEach((date, index) => {
        const x = padding.left + (chartWidth / (data.dates.length - 1)) * index
        const formattedDate = new Date(date).toLocaleDateString('zh-CN', { 
          month: '2-digit', 
          day: '2-digit' 
        })
        ctx.fillText(formattedDate, x, padding.top + chartHeight + 20)
      })

      // 绘制 Y 轴标签
      ctx.textAlign = 'right'
      for (let i = 0; i <= 5; i++) {
        const value = minValue + (valueRange / 5) * i
        const y = padding.top + chartHeight - (chartHeight / 5) * i
        ctx.fillText(Math.round(value).toString(), padding.left - 10, y + 4)
      }

      // 更新动画进度
      if (animationProgress.current < 1) {
        animationProgress.current += 0.015
        requestAnimationFrame(animate)
      } else {
        // 动画完成后，确保绘制完整图形
        animationProgress.current = 1
      }
    }

    // 重置动画进度并开始动画
    animationProgress.current = 0
    const animationId = requestAnimationFrame(animate)

    return () => {
      cancelAnimationFrame(animationId)
    }
  }, [data])

  return (
    <div className="w-full h-80 relative">
      <canvas
        ref={canvasRef}
        className="w-full h-full"
        style={{ display: 'block' }}
      />
    </div>
  )
}

export default TrendChart
